Main Site Root Folder
The Site Root Folder is key to your projects success. Computers are very sensitive to the placement of files. Every time you link a file to an HTML page, code is written identifying the location of that file on your web page. If the file is later moved, the computer will not find the linked file and some of your web page will not function.
For these reasons, please commit to keeping the Main Site Root Folder in one place and never moving it. It can be saved to any form of storage, as long as Dreamweaver can easily see the folder when it opens. I suggest a flash drive. It is also very wise practice to backup this folder on another form of storage in case the original is lost. (You do not want to build your site over from scratch!)
Next, if you are using the SVSU Lab Computers every time you turn on Dreamweaver, you will have to identify where the Site Root Folder is. I have named the Site Root Folder we are using for the Work Site, the Main Site Root Folder.
To explain to Dreamweaver where the folder is, follow these steps…
1) Go to the drag down menu, Sites
2) Choose Manage Sites…
3) In the lower right corner, click on New Site
4) Give the Site a Name (I suggest MSRF, for Main Site Root Folder)
5) Click on the small folder icon, across from the words “Local Site Folder”
6) Then click on Save
Again, if you will be using the SVSU Lab Computers, this will have to be done at the start of every class. If you are using your own computer, it will remember these settings and you will only have to enter this once.
As stated before, please do not move the placement of the Main Site Root Folder. The same applies to any items that should be stored in your Main Site Root Folder. For example, you cannot keep your index.html (home page) on one flash drive, outside of your Main Site Root Folder. That is because the computer will have a very difficult time locating them outside of the Main Site Root Folder.
Also, even if Dreamweaver could find a rouge file outside of the Main Site Root Folder, it would not be able to share the file with the rest of the world when the website is published. If however, you keep the proper files in their correct location and structure, you will have an easy time publishing your site for the world to see.
These should be included in the folder: CSS, JS, Images, Downloads, index.HTML (homepage)on one flash drive, outside of your Main Site Root Folder. That is because the computer will have a very difficult time locating them outside of the Main Site Root Folder.Also, even if Dreamweaver could find a rouge file outside of the Main Site Root Folder, it would not be able to share the file with the rest of the world when the website is published. If however, you keep the proper files in their correct location and structure, you will have an easy time publishing your site for the world to see.
HTML Sandwich
- HTML is linear - It goes from top to bottom - It includes four sections
1. doctype
2. html
3. head
4. body
Flag in top of sandwich; begins with Doctype HTML
Top bun of sandwich; begins the HTML
Head portion / Meta data This is known as simply metadata.
Fillings of sandwich; Body, which is what is visible on the page
Bottom bun of sandwich; ends with html
Tags
It is constructed via a set of tags. Tags are used to delimit the start and end of elements in the markup. These can reference structure, or elements such as type.
HTML Structure and Content
HTML uses a combination of elements (tags) to structure web content.
Semantic elements should be used to define the structure of your webpage:
Content Elements: Text, images, and multimedia.
Structural Elements: Semantic tags like header, main, footer, article, section, and aside organize content meaningfully. /aside
Identifiers: Use class for elements that appear multiple times on a page and id for unique elements.
Tags: Define the start and end of an element.
For example, p for paragraphs, a for links, and div for divisions or sections.
With the advent of HTML5, it's encouraged to use these semantic elements over non-semantic ones like div for every section, as they offer better accessibility and are more SEO-friendly.
CSS = Style
CSS (Cascading Style Sheets) defines the look and layout of a web page.
Modern CSS practices have evolved to include responsive design techniques and new layout models like Flexbox and CSS Grid, alongside traditional methods. Here’s an updated approach:
4A. External Stylesheets:
Linking a separate .css file is the most efficient way to style your website, allowing for the separation of content and design.
4B. Embedded CSS:
Placing CSS directly within the head section using 'style' tags is suitable for single-page styles.
4C. Inline CSS:
Applying styles directly to elements via the style attribute is least efficient but can be useful for quick, specific adjustments.
For layout and structure:
- Use Flexbox for one-dimensional layouts (either rows or columns).
- Use CSS Grid for two-dimensional layouts (rows and columns simultaneously).
- Adopt Responsive Design practices with media queries and relative units (e.g., percentages, vw, vh) to ensure your website adapts to different screen sizes and devices.
Common CSS properties include:
- display: flex; or display: grid; for layout.
- width, height: Use relative units for flexibility.
- padding, margin: Control spacing around and within elements.
- border: Defines the border around elements.
- background-color, background-image: Set the background of elements.
- max-width, max-height: Limit the size of elements, useful for responsive design.
Advanced CSS Techniques
Flexbox
is a CSS layout model designed for one-dimensional layouts, meaning it can efficiently manage layouts in either a row or column direction but not both simultaneously. It's particularly useful for aligning items within a container, even when their sizes are unknown or dynamic. A key feature of Flexbox is its ability to distribute space between items unevenly and align items vertically within a container, which was difficult with older techniques like float. It's important to note that Flexbox properties are applied to a parent container, turning it into a flex container, and its direct children become flex items. Flexbox does not work with float, as float is ignored within a flex container.
CSS Grid
is a two-dimensional layout system capable of handling both rows and columns simultaneously, making it ideal for creating complex web layouts. Grid allows for the definition of templates, placing items into the layout, and aligning them with precision. Like Flexbox, Grid operates on a parent container, which is designated as a grid container. The children of this container then become grid items. Grid provides more control over layout than Flexbox, making it better suited for larger, more complex layouts. Similar to Flexbox, float has no effect on grid items within a grid container